<template>
  <div style="height: 100%;width: 100%;">
    <split-pane :min-percent="20" :default-percent="100" split="horizontal">
      <template slot="paneL">
        <div class="pneleft view">
           
            
            <div class="view flex-row flex-1">
                <div class="view height100 m-r-20 m-l-20 m-t-15 h-c-75">
                  <div class="pan_top m-b-15 flex-1" @click="changeType(1)" :class="cdtype == 1 ? 'active':''">
                    <span>
                      全
                      <br />
                      部
                    </span>
                  </div>
                  <div class="pan_top flex-1" @click="changeType(2)" :class="cdtype == 2 ? 'active':''">
                    <span>
                      可
                      <br />
                      撤
                    </span>
                  </div>
                </div>

                <div>
                    <div class="pan_rig_top">
                      <div class="pan_rig_to_zi">
                        <button class="butt_cha" @click="wholecancelorder">全部撤单</button>
                        <button class="butt_cha" @click="cancelorder">撤单</button>
                      </div>
                    </div>


                    <div class="pan_rig">
                      <div class="data_lst">
                        <div class="data_title">
                          <div class="title_one" style="width: 100px;">合约</div>
                          <div class="title_one" style="width: 100px;">买卖</div>
                          <div class="title_one" style="width: 100px;">开平</div>
                          <div class="title_one" style="width: 100px;">价格</div>
                          <div class="title_one" style="width: 100px;">委托数量</div>
                          <div class="title_one" style="width: 100px;">成交数量</div>
                          <div class="title_one" style="width: 100px;">状态</div>
                          <div class="title_one" style="width: 100px;">币种</div>
                          <div class="title_one" style="width: 200px;">委托时间</div>
                          <div class="title_one" style="width: 200px;">委托号</div>
                        </div>

                        <div class="data_info">
                          <div
                            :class="activeClass2 == index ? 'activess' : ''"
                            class="data_title_one"
                            v-for="(item, index) in cdlist"
                            :key="index"
                            @click="getEntrust(item, index)"
                            style="cursor: default;"
                          >
                            <div class="title_sone" style="width: 100px;">{{ item.contract || '- -' }}</div>
                            <div :class="item.risefall == 'rise' ? 'title_red' : 'title_green'" class="title_sone" style="width: 100px;">{{ item.risefall == 'rise' ? '买' : '卖' }}</div>
                            <!-- 开平 -->
                            <div class="title_sone" style="width: 100px;">{{ item.status == 'open' ? '开仓':'平仓' }}</div>
                            <!-- 价格 -->
                            <div class="title_sone" style="width: 100px;">{{ item.playprice }}</div>
                            <!-- 委托数量 -->
                            <div class="title_sone" style="width: 100px;">{{ item.volume }}</div>
                            <!-- 成交数量 -->
                            <div class="title_sone" style="width: 100px;">{{ item.buynum }}</div>
                            <!-- 完全成交 -->
                            <div class="title_sone" style="width: 100px;">{{ item.isok == 1 ? '完全成交':'已成交' }}</div>

                            <!-- 币种 -->
                            <div class="title_sone" style="width: 100px;">{{ item.rate }}</div>
                            
                            <!-- 委托时间 -->
                            <div class="title_sone" style="width: 200px;">{{ moment.unix(item.createtime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                            <!-- 委托号 -->
                            <div class="title_sone" style="width: 200px;">{{ item.wtnum }}</div>
                            
                          </div>

                        </div>
                      </div>
                    </div>
                </div>
                
            </div>
          
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment'
export default {
  name: 'transaciton',
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist, /* 全部合约代码 */
    bottomlisttle: state => state.bottomlist, /* 底部登录 */
    userInfo: state => state.userInfo,
    zijinSet: state => state.zijinSet
  }),
  watch: {
    ticket:{
　　　　handler: function(val) {
        this.holdlist = this.holdlist.map( item => {
          let currentItem = val.find( data => {
            return  data.M + data.S + data.C == item.contract
          })
          if (currentItem) {
             if (item.risefall == 'rise') {
                item.newPrice = currentItem.S1
            } else {
                item.newPrice = currentItem.B1
            }
            item = {...item, ...currentItem}
          } else {
            item.disabled = true
          }
          let yk = this.getYK(item)
          item.yk = yk
          return item
        })
        let fudong = 0
        if (this.holdlist.length == 0) {
              let keyong = this.userInfo.money
              let quanyi = this.userInfo.score
              let fengxiandu = (parseFloat(Number(this.userInfo.margin) / quanyi) * 100).toFixed(2)
              this.$store.commit('set',{zijinSet:{
                  keyong: keyong,
                  quanyi: quanyi,
                  fudong: 0,
                  fengxiandu: fengxiandu
              }});
        }
        this.holdlist.forEach( item => {
            let ra = this.userInfo.rate.find( e => e.curreny == item.currency)
            if (ra) {
              fudong = parseFloat(fudong + Number(item.yk) * ra.rate) 
              let keyong = parseFloat(Number(this.userInfo.money) + fudong)
              let quanyi = parseFloat(Number(this.userInfo.score) + fudong)
              let fengxiandu = (parseFloat(Number(this.userInfo.margin) / quanyi) * 100).toFixed(2)
              this.$store.commit('set',{zijinSet:{
                  keyong: keyong,
                  quanyi: quanyi,
                  fudong: fudong,
                  fengxiandu: fengxiandu
              }});
            }
           
        })
         
　　　　},
      immediate: true,
　　　 deep:true
　　},
  },
  data() {
    return {
      moment: moment,
      type: 1,
      cdtype: 1, // 全部，可撤
      entrustlist: [],
      selectItem: null,
      btnlist: true,
      /* 按钮点击事件 */
      activeClass1: -1,
      activeClass2: -1,
      bntindex: true, //判断是条件单还是持仓单
      holdid: null, //持仓id
      wtnum: '', // 撤单委托号
      iscance1: '',
      iscance2: '',
      holdlist: [], //持仓列表
      cdlist: [], // 撤单列表
      chicangtime: null,
      order_list_condition: [], //条件单、委托
      stop_profit_price: 0 /* 重设止盈价格 */,
      stop_loss_point: 0 /* 重设止损价格 */
    };
  },
  mounted() {
       this.chicanglist()
       this.changeType(1)
  },
  methods: {
    getYK(item) {
      let dc = 0
      if (!item || !item.N) {
        return dc
      }
      let p = 0
      if (item.risefall == 'rise') {
          if (item.N.indexOf('日元') > -1) {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(7)
          } else if (item.N.indexOf('欧元') > -1) {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(5)
          } else {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(3)
          }
          
          if (dc == 0) {
            p = 0
           
            return p
          }
          
          if (item.N.indexOf('日元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(7)
           
            return  p
          } else if (item.N.indexOf('欧元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(5)
           
            return  p
          } else {
            p =  (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(3)
           
            return p
          }
      } else {
          if (item.N.indexOf('日元') > -1) {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(7)
          } else if (item.N.indexOf('欧元') > -1) {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(5)
          } else {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(3)
          }
          
          if (dc == 0) {
            p = 0
           
            return p
          }
          if (item.N.indexOf('日元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(7)
           
            return  p
          } else if (item.N.indexOf('欧元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(5)
           
            return  p
          } else {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(3)
           
            return  p
          }
      }
      
    },
    changeType(type) {
      if (type) {
        this.cdtype = type
      }
      if (this.cdtype == 1) {
        // 明细
        this.getChildList()
      } else {
         this.getcdlist()
      }
      
    },
    
    loadtime() {
    },
    // 锁仓
    locknum() {
      if (!this.selectItem || !this.selectItem.contract) {
        this.$notify.error('请选择要锁仓的品种！');
        return;
      }
      let that = this
      this.$layer.confirm('确定锁仓？', {
        btn: ['确定'] //按钮
      }, () => {
        this.$post('/order/lockorder', {
          symbol_id: this.selectItem.contract,
          risefall: this.selectItem.risefall == 'rise' ? 'rise': 'fall'
        }).then(res => {
          if (res.code == 1) {
            that.$layer.closeAll()
            that.chicanglist()
            that.selectItem = null
            return that.$notify.success(res.msg);;
          } else {
            return that.$notify.error(res.msg);
          }
        });
      });
    },
    // 止盈止损设置
    ordernum(item) {
      if (!this.selectItem || !this.selectItem.contract) {
        return this.$notify.error('请选中一笔进行操作！');
      }
      var that = this;
      that.btnlist = false;
      var bool = false;
      that.$layer.open({
        content: "<div id='inputbtn'></div>",
        title: '请输入止盈、止损值',
        btn: ['确定', '取消'],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          that.stop_profit_price = $('#stop_profit_price').val();
          that.stop_loss_point = $('#stop_loss_point').val();

          if (that.stop_profit_price == '' || that.stop_profit_price == 0 || that.stop_profit_price == undefined) {
            that.stop_profit_price = null;
          }
          if (that.stop_loss_point == '' || that.stop_loss_point == 0 || that.stop_loss_point == undefined) {
            that.stop_loss_point = null;
          }
          var postlsit;
          if (that.bntindex) {
            postlsit = {
              stop_profit_price: that.stop_profit_price,
              stop_loss_price: that.stop_loss_point,
              orderid: that.holdid
            };
          } else {
            postlsit = {
              stop_profit_price: that.stop_profit_price,
              stop_loss_price: that.stop_loss_point,
              orderid: that.form,
              type: 1
            };
          }
          if (!bool) {
            bool = true;
            that.$post('/order/setprofitloss', postlsit).then(res => {
              that.chicanglist()
              that.selectItem = null
              that.activeClass1 = -1;
              that.activeClass2 = -1;
              that.$layer.closeAll();
              if (res.code == 1) {
                that.$notify.success(res.msg || '平仓成功');
              } else {
                that.$notify.error(res.msg);
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      var appendHtml = $('#inputbtn').html(
        '<div>止盈:<input type="number" id="stop_profit_price" placeholder="请输入止盈" style="padding: 5px;"/></div>' +
          '<div>止损:<input type="number" id="stop_loss_point" placeholder="请输入止损" style="padding: 5px;"/></div>'
      );
      // this.$compile(appendHtml.get(0));
    },
     /* 获取撤单列表 */
    getcdlist() {
      this.$get('order/cancleorderlist').then(res => {
        this.cdlist = res.data;
      });
    },
    
    /* 获取总订单列表 */
    chicanglist() {
      this.$get('order/sumorderlist').then(res => {
        this.holdlist = res.data;
         
      });
    },

    /* 获取子订单列表 */
    getChildList() {
      this.$get('order/allcancleorderlist').then(res => {
       
        if (this.cdtype == 1) {    
          this.cdlist = res.data;
        }
        
      });
    },

    /* 持仓列表点击事件*/
    getItemhold(item, index) {
      if (item.disabled) {
        this.$layer.alert('该合约不在交易时间段！')
        return false
      }
      this.selectItem = item
      this.activeClass1 = index;
      this.$store.commit('set', {
        hoidlist: item
      });
      this.$store.commit('trade/select', item);
    },
    //全部平仓
    wholecloseposition() {
      if (this.holdlist == '') {
        this.$notify.error('暂无持仓记录无法全部平仓！');
        return;
      }
      this.$post('/order/saleallorder').then(res => {
        this.activeClass1 = -1;
        if (res.code == 1) {
          this.$notify.success(res.msg || '平仓成功');
          this.chicanglist()
          
        } else {
          return this.$notify.error(res.msg || '全部平仓失败');
        }
      });
    },
    //快捷平仓
    quickcloseposition() {
      if (!this.selectItem || !this.selectItem.contract) {
        this.$notify.error('请选择要模拟交易的品种！');
        return;
      }
      let that = this
      this.$layer.confirm('确定平仓？', {
        btn: ['确定'] //按钮
      }, () => {
        this.$post('/order/saleorder', {
          symbol_id: this.selectItem.contract,
          rise_fall: this.selectItem.risefall == 'rise' ? 'rise': 'fall'
        }).then(res => {
          if (res.code == 1) {
            that.$layer.closeAll()
            that.chicanglist()
            this.selectItem = null
            return that.$notify.success(res.msg || '平仓成功');;
          } else {
            return this.$notify.error(res.msg || '平仓失败');
          }
        });
      });
      
    },
    //快捷反手
    quickbackhand() {
      if (!this.selectItem || !this.selectItem.contract) {
        this.$notify.error('请选择要模拟交易的品种！');
        return;
      }
      this.$post('/order/backhand', {
        symbol_id: this.selectItem.contract,
        risefall: this.selectItem.risefall == 'rise' ? 'rise': 'fall'
      }).then(res => {
        this.activeClass1 = -1;
        this.selectItem = null
        if (res.code == 1) {
          this.chicanglist()
          return this.$notify.success(res.msg || '反手成功');
        } else {
          return this.$notify.error(res.msg || '反手失败');
        }
      });
    },
    //选中那一行
    getEntrust(item, index) {
      this.activeClass2 = index;
      this.wtnum = item.wtnum;
    },
    //撤单
    cancelorder() {
      if (!this.wtnum) {
        this.$notify.error('请选中一单操作');
        return;
      }
      this.$post('order/cancleorder', { wtnum: this.wtnum }).then(res => {
        if (res.code == 1) {
          this.$notify.success(res.msg || '撤单成功！');
          this.activeClass2 = -1;
          this.changeType(this.cdtype)
        } else {
          this.$notify.error(res.msg || '撤单失败！');
        }
      });
    },
    //全部撤单
    wholecancelorder() {
      this.$post('order/cancleallorder', {}).then(res => {
        this.activeClass2 = -1;
        if (res.code == 1) {
          this.$notify.success(res.msg || '全部撤单成功！');
          this.changeType(this.cdtype)
        } else {
          this.$notify.error(res.msg || '全部撤单失败！');
        }
      });
    },
    
  }
};
</script>

<style scoped lang="less">
/deep/.splitter-pane-resizer {display: none !important;}
/* 上方 */
.pneleft {
  width: 100%;
  height: 100%;
}
/* 上部分持仓分布 */
.pan_top.active {
  border-color: transparent;
  background: #3399ff;
  color: #fff;
}
.pan_top {
  width: 25px;
  cursor: pointer;
  background-color: #e3e2da;
  border: #888 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
/* 上方表格部分 */
.pan_rig {
  width: calc(100% - 28px);
  height: 100%;
  background-color: #ffffff;
}
.pan_top {
  width: 35px;
}
/* 上方表格按钮 */
.pan_rig_top {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
/* 按钮盒子 */
.pan_rig_to_zi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 按钮 */
.butt_cha {
  width: 78px;
  height: 30px;
  cursor: pointer;
  transition: all ease .3s;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #fefefe, #f6f6f2, #e2dfd6);
  border: #ccc solid 1px;
  margin-right: 5px;
  margin-left: 3px;
}
.butt_cha:hover {
  border-color: #003c74;
  color: #003c74 !important;
  
 }
/* 表格内容盒子 */
.data_lst {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100% - 50px);
}
/* 表格标题 */
.data_title {
  height: 28px;
  margin-top: 2px;
  width: 200%;
  border-left: 1px solid #e5e9ec;
}

/* 标题内部 */
.title_one {
  float: left;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: #e5e9ec solid 1px;
  border-left:0;
  color: #000000;
  background-color: #d8e2ea;
}
/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: calc(100% - 70px);
    max-height: calc(100% - 70px);
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
  border: 1px solid #e5e9ec;
  border-top: 0;
}
/* 表格内容 */
.data_title_one {
  width: 100%;
  height: 28px;
}
.title_sone {
  float: left;
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_sone2 {
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0 2px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/* 下方显示 */
.pnerigh {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
/* 下边左侧 */
.pnerigh_title {
  width: 25px;
  height: 100%;
  background-color: #ffffff;
}

.rigtit_top {
  width: 25px;
  height: 50%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

.rigcan1 {
  background-color: #f7f7f7;
  color: #a0a0a0;
  margin-bottom: 15px;
}

/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
